<template>
  <div class="auxiliarys-box" v-if="list.length > 0" :style="{ background: props.imgBackground }">
    <!-- <van-tabs v-model="active">
      <van-tab :title="item.name" v-for="item in list" :key="item.id"> -->
    <div class="tab-menu-box" v-if="list.length > 1">
      <div class="tab-menu">
        <div
          :style="{
            borderBottom: current === index ? `1px solid ${store.styleInfo.shmentColor}` : `none `,
            color: current == index ? store.styleInfo.shmentColor : '#333333',
          }"
          class="tab-menu-item"
          v-for="(item, index) in list"
          :key="item.id"
          @click="changeCurrent(item.id, index)"
        >
          <span> {{ item.name }}</span>
        </div>
      </div>
      <div
        class="border"
        :style="{
          background: store.styleInfo.shmentColor,
        }"
      ></div>
    </div>
    <div>
      <div class="auxiliarys-box-item">
        <div class="auxiliarys-box-else">
          <div class="auxiliarys-box-title">{{ list[current].name }}</div>
          <div class="auxiliarys-box-subtitle" v-if="list[current].subTitle">——{{ list[current].subTitle }}</div>
          <div class="tdesign-demo-image-viewer__base" v-if="list[current].coverUrl">
            <t-image-viewer :images="[$filters.getLinkUrl(list[current].coverUrl) + '?imageView2/2/format/webp']">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image">
                  <img
                    @click="open"
                    alt="test"
                    :src="$filters.getLinkUrl(list[current].coverUrl + '?imageView2/3/w/356/h/356/format/webp')"
                    class="tdesign-demo-image-viewer__ui-image--img auxiliarys-coverUrl t-image--fit-cover t-image--position-center"
                  />
                </div>
              </template>
            </t-image-viewer>
          </div>
          <div class="description-box" v-if="list[current].description">
            <div
              class="content-text-heard-item"
              :class="{
                'content-text-heard-item0': store.styleInfo.themeColor == '#CFBDA8',
                'content-text-heard-item1': store.styleInfo.themeColor == '#8F9EBF',
                'content-text-heard-item2': store.styleInfo.themeColor == '#B9463F',
                'content-text-heard-item3': store.styleInfo.themeColor == '#343029',
                'content-text-heard-item4': store.styleInfo.themeColor == '#171719',
              }"
            >
              <van-text-ellipsis
                :content="getTextHtmlellipsisBr(list[current].description)"
                :rows="5"
                expand-text="展开"
                collapse-text="收起"
              />
            </div>
          </div>
        </div>
        <!-- <playImg :cover="item.coverUrl" /> -->
        <!-- <img
          :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/2/w/356/h/356/format/webp')"
          alt=""
          class="auxiliarys-coverUrl"
        /> -->
      </div>
      <div class="video-box" v-if="list[current].video && list[current].video.url">
        <playVideo :name="list[current].video.name" :url="list[current].video.url" />
      </div>
      <div
        class="audio-box"
        v-if="list[current].audio && list[current].audio.url"
        :class="'audio' + store.styleInfo.colorType"
      >
        <playAudio
          :name="list[current].audio.name"
          :url="list[current].audio.url"
          :nameColor="store.styleInfo.shmentColor"
          :iconColor="store.styleInfo.shmentColor"
          :timeColor="store.styleInfo.shmentColor"
          :background="store.styleInfo.background"
        />
      </div>

      <div
        class="exhibits-box"
        :id="'boxs-content-scroll' + list[current].id"
        v-if="list[current].showpieces.length > 0"
        :class="{ 'exhibits-box1': list[current].showpieces.length > 2 }"
      >
        <div
          class="exhibits-item"
          v-for="(items, indexs) in list[current].showpieces"
          :key="items.id"
          :class="{
            'exhibits-item-length1': list[current].showpieces.length === 1,
            'exhibits-item-length2': list[current].showpieces.length > 1,
          }"
        >
          <img
            v-if="items.coverUrl"
            :style="{ background: props.exhibitBackground }"
            :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/0/h/158/format/webp')"
            class="img-box t-image--fit-contain t-image--position-center"
            @click="pathExhibits(list[current].id, items.id)"
          />
          <div class="exhibits-item2-name">{{ items.name }}</div>
        </div>
      </div>
      <HwScrollXVue :dom="list[current].id" v-if="list[current].showpieces.length > 2"></HwScrollXVue>
    </div>
    <!-- </van-tab>
    </van-tabs> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useRouter, useRoute } from 'vue-router';
import { auxiliarysList } from '@/api/templates/templates';
import { useProjectStore } from '@/store';
import { ref, watch, nextTick } from 'vue';
import textMax from './textMax.vue';
import playAudio from './audio.vue';
import { storeToRefs } from 'pinia';
import playVideo from '@/wap/minxinComponents/templatePlay/video.vue';
import playImg from '@/components/templatePlay/image.vue';
import { urls } from '@/utils/request/upload';
import arrowLeft from '../arrowLeft.vue';
import arrowRight from '../arrowRight.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { getTrimText, getTextHtml, getTextHtmlellipsisBr } from '@/utils/minxin';
import { BrowseIcon } from 'tdesign-icons-vue-next';
import HwScrollXVue from '../../../Subunit/component/hwScrollX.vue';
import { set } from 'lodash';
const emit = defineEmits(['emitExhibits']);
const store = useProjectStore();
const { styleInfo } = storeToRefs(store);
const props = defineProps({
  moduleId: {
    type: Number,
  },
  titleColor: {
    type: String,
    default: '#333333',
  },
  maxLen: {
    type: Number,
    default: 80,
  },
  imgBackground: {
    type: String,
    default: '#F0F3F6',
  },
  exhibitBackground: {
    type: String,
    default: '#F0F3F6',
  },
  subtitleColor: {
    type: String,
    default: 'rgba(51, 51, 51, 1)',
  },
  flag: {
    type: Boolean,
    default: true,
  },
});
const list = ref([]);
const current = ref(0);
const router = useRouter();
const route = useRoute();

const pathExhibits = (moduleId: number, showpieceid: number) => {
  // console.log(moduleId, showpieceid);

  emit('emitExhibits', moduleId, showpieceid);
};
const init = async () => {
  try {
    let res = await auxiliarysList(localStorage.getItem('projectId'), props.moduleId, {
      c: 0,
    });
    list.value = res.data;
    // nextTick(() => {
    //   var dom = document.getElementById('tem1-heard-item');

    //   if (props.flag) {
    //     dom.scrollIntoView();
    //     const ele = document.getElementById('tem1-heard-item'); // 获取元素
    //     const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    //     window.scrollTo({
    //       top: top,
    //     });
    //   }
    // });
  } catch (err) {}
};
const changeCurrent = (id: number, index: number) => {
  current.value = index;
  setTimeout(() => {
    var dom = document.getElementById('boxs-content-scroll' + id);
    // console.log(dom, 'boxs-content-scroll' + id, 'dom---');
    if (dom) {
      dom.scrollLeft = 0;
    }
  }, 50);
};
init();
watch(
  () => props.moduleId,
  () => {
    init();
  },
  { deep: true },
);
watch(
  () => styleInfo,
  (value) => {
    init();
  },
  { deep: true, immediate: true },
);
</script>

<style scoped lang="less">
.auxiliarys-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  > div {
    width: 100%;
  }
}
.auxiliarys-box-item {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
  width: 100%;
  margin: auto;
  // margin-bottom: 8px;
}

.auxiliarys-box-title {
  font-family: SourceHanSerifCN-bold;
  font-size: 18px;
  // line-height: 32px;

  text-align: center;
  padding: 0 16px;
}
.auxiliarys-box-subtitle {
  font-family: SourceHanSerifCN;
  font-size: 15px;
  color: rgba(51, 51, 51, 0.6);
  // line-height: 32px;
  margin-top: 2px;
  text-align: center;
  padding: 0 16px;
}

:deep(.bbb) {
  font-size: 18px !important;
}
.description-box {
  padding: 0 16px;
  margin-top: 4px;
}
.content-text-heard {
  :deep(span) {
    font-size: 18px !important;
  }
}
.video-box {
  margin-top: 8px;
  padding: 0 16px;
  :deep(.video-box) {
    margin-bottom: 0;
  }
}
.audio-box {
  padding: 0 16px;
  margin-top: 8px;
}
:deep(.t-slider__rail) {
  height: 2px;
}
:deep(.van-slider__button) {
  width: 10px;
  height: 10px;
  background: rgba(38, 41, 51, 1);
  border: none;
}
// :deep(.van-slider__button:hover) {
//   width: 12px;
//   height: 12px;
//   background: rgba(38, 41, 51, 1);
//   border: none;
// }
:deep(.van-slider__bar) {
  height: 2px;
  background: rgba(38, 41, 51, 1);
}
.exhibits-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: auto;
  // padding-bottom: 50px;
  margin-top: 10px;
}
.exhibits-box1 {
  justify-content: flex-start;
  padding: 0 16px;
}
.exhibits-box1::-webkit-scrollbar {
  display: none;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;

  .img-box {
    width: 100%;
    height: 149px;
  }
  .exhibits-item2-name {
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: #faf9f7;
    text-align: center;
    font-size: 15px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    font-family: SourceHanSerifCN-bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 14px;
  }
}
.unit-exbit-null-remarks-info {
  margin-top: 10px;
}
.exhibits-item-length1 {
  width: 311px;
  height: 194px;
  > img {
    height: 158px !important;
  }
  .exhibits-item2-name {
    height: 36px !important;
    line-height: 36px;
  }
}
.exhibits-item-length2 {
  width: 149px;
  height: 185px;
  margin-right: 13px;
}
.exhibits-item-length2:last-child {
  margin-right: 0;
}
.exhibits-item-right {
  display: flex;
  flex-direction: column;
  width: calc(100% - 300px);
  padding: 0px 40px;
  height: 100%;
}
.exhibits-item-right-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-bottom: 24px;
}
.right-top-name-parent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exhibits-item-right-top-name {
  // font-family: SourceHanSerifCN;
  width: 100%;
  font-size: 22px;
  line-height: 34px;
  color: #333;
}
.iconfonts {
  cursor: pointer;
  font-size: 24px;
  color: #333;
}
.exhibits-item-right-description {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 这里是超出几行省略 */
  overflow: hidden;
  margin-top: 26px;
  text-align: justify;
  span {
    // font-family: SourceHanSerifCN;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    color: #666666;
    text-align: justify;
  }
}
.item-mg {
  margin-top: 20px;
}
:deep(.d-slider .d-slider__runway .d-slider__preload) {
  background: rgba(255, 255, 255, 0.81);
}
.auxiliarys-coverUrl {
  display: block;
  width: 285px;
  height: 285px;
  border-radius: 50%;
  margin: auto;
  margin-bottom: 8px;
}
.t-row {
  margin-top: 26px;
  margin-bottom: 0;
  color: #333;
  // font-family: SourceHanSerifCN;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

.auxiliarys-box-else {
  flex: 1;
}
.content-text-heard-item0 {
  :deep(.van-text-ellipsis__action) {
    color: #d2ad77;
  }
}
.content-text-heard-item1 {
  :deep(.van-text-ellipsis__action) {
    color: #133889;
  }
}
.content-text-heard-item2 {
  :deep(.van-text-ellipsis__action) {
    color: #ab1d22;
  }
}
.content-text-heard-item3 {
  :deep(.van-text-ellipsis__action) {
    color: #3f4d4f;
  }
}
.content-text-heard-item4 {
  :deep(.van-text-ellipsis__action) {
    color: #949494;
  }
}
/deep/.van-text-ellipsis {
  line-height: 32px;
}
.tab-menu-box {
  position: relative;
}
.tab-menu {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 15px !important;
  margin-bottom: 20px;
  overflow: auto;

  .tab-menu-item {
    padding: 10px 16px;
    padding-top: 0;
    flex-shrink: 0;
    font-family: SourceHanSerifCN;
    font-size: 15px !important;
    span {
      font-size: 15px !important;
      -webkit-text-size-adjust: none;
    }
  }
}
.tab-menu::-webkit-scrollbar {
  display: none;
}
.border {
  width: 100%;
  height: 1px;
  opacity: 0.2;
  position: absolute;
  bottom: 20px;
}
.tdesign-demo-image-viewer__base {
  margin-top: 8px;
}
/deep/.van-text-ellipsis {
  font-size: 16px;
  line-height: 32px;
  text-indent: 2em;
}
/deep/.van-text-ellipsis {
  text-align: justify;
}
/deep/.d-pointer {
  // position: absolute;
  // bottom: 40%;
  // left: 50%;
  // transform: translateX(-50%);
  // display: none;
}
// /deep/#refPlayerWrap {
//   --b8a1afc0: none !important;
// }
.video-box {
  width: 100%;
  // margin-top: 24px;
  :deep(.d-player-wrap) {
    height: auto !important;
  }
}
.audio1 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.van-slider__bar) {
    background: #d2ad77;
  }
  :deep(.van-slider__button) {
    background: #d2ad77;
    border: 2px solid #d2ad77;
  }
}
.audio2 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.van-slider__bar) {
    background: #133889;
  }
  :deep(.van-slider__button) {
    background: #133889;
    border: 2px solid #133889;
  }
}
.audio3 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.van-slider__bar) {
    background: #ab1d22;
  }
  :deep(.van-slider__button) {
    background: #ab1d22;
    border: 2px solid #ab1d22;
  }
}
.audio4 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.van-slider__bar) {
    background: #3f4d4f;
  }
  :deep(.van-slider__button) {
    background: #3f4d4f;
    border: 2px solid #3f4d4f;
  }
}
.audio5 {
  :deep(.t-slider__rail) {
    background: rgba(170, 170, 170, 0.2);
  }
  :deep(.van-slider__bar) {
    background: #949494;
  }
  :deep(.van-slider__button) {
    background: #949494;
    border: 2px solid #949494;
  }
}
</style>
